<html>
<head>
	<link REL=StyleSheet href="cabocity.css" type="text/css" media=screen>
	<link rel=StyleSheet href="house.css" type="text/css" media=screen>
	<link rel=StyleSheet href="road.css" type="text/css" media=screen>
	<script type="text/javascript" src="mootools-core-1.3.1-full-nocompat-yc.js" ></script>
	<script type="text/javascript" src="mootools-more-1.3.1.1.js" ></script>
	<script type="text/javascript" src="socket.io.min.js" ></script>
	
	<script type="text/javascript" src="cabocity.js" ></script>
	<script type="text/javascript" src="connection.js" ></script>
	<script type="text/javascript" src="commands.js" ></script>
	<script type="text/javascript" src="map.js" ></script>
	<script type="text/javascript" src="road.js" ></script>
	<script type="text/javascript" src="body.js" ></script>
	<script type="text/javascript" src="house.js" ></script>
	<script type="text/javascript" src="empire.js" ></script>
	<script type="text/javascript" src="bodytypes.js" ></script>
	
	
	<style>
	
	*, body{
		margin: 0;
		outline: 0;
	}
	#tools{
		width:  500px;
		height: 50px;
		background-color: #D0D0D0;
	}
	#tools a{
		display: block;	
		float: left;
		margin: 0 20px;
		width: 50px;
		height: 50px;
	}
	
	#newTable {
		float: right !important;
	}

</style>
</head>
<body onload="auxInit();">
	<div id="bg" ></div>
	<div id="touchpad" ></div>  <!-- Elemento encima de TODO. No contiene nada. No se mueve. y **ocupa tanto como el tamaño del screen**. -->
	<div id="cont" > <!-- Contenedor completo, contiene TODO y es lo que se "mueve"
					por lo que todo lo de dentro, al ser relativo a este elemento (pos abs en css)
					se moverán con él. -->
		<!-- Lista de elementos visibles. Por ejemplo, mouseGrid, una casa, un elemento moviendose, etc... -->
		<!-- Esta lista de elementos está como posición absoluta en css (respecto al elemento "cont" -->
		
		<!--
			GRID, encima de todo, pero debajo del touchpad.
		-->
		<canvas id="grid"  width="1024" height="600" ></canvas>
	</div>
	<div id="tools"> <!-- fixeado en el monitor. Siempre visible. -->
		<a id="road" href="#" >Road</a>
		<a id="house" href="#" >Casa</a>
		<a id="cancelBuild" href="#" >Cancel</a>
		
		<a id="removeBuild" href="#" >Borrar</a>
		
		<a id="newTable" href="#" >Nuevo</a>
	</div>
	<!--<div id="epvCont"></div>-->
</body>
</html>
